// 统一组件样式 - 透明玻璃主题
// 导入变量和混合器
@use './variables.scss' as *;
@use './mixins.scss' as *;

// ==================== 全局组件样式 ====================
// 选择框统一样式
.glass-select,
.el-select.glass-select {
  @include select-glass;
}

// 下拉菜单统一样式
:deep(.glass-dropdown),
:deep(.el-select-dropdown.glass-dropdown),
:deep(.el-dropdown-menu.glass-dropdown) {
  @include dropdown-glass;
}

// 输入框统一样式
.glass-input,
.el-input.glass-input {
  .el-input__wrapper {
    @include input-glass;
  }

  .el-input__inner {
    color: $text-primary;
    background: transparent;

    &::placeholder {
      color: $text-placeholder;
    }
  }
}

// 按钮统一样式
.glass-button,
.el-button.glass-button {
  @include button-glass;
}

// 弹窗统一样式
:deep(.glass-dialog),
:deep(.el-dialog.glass-dialog) {
  @include dialog-glass;
}

// 表格统一样式
.glass-table,
.el-table.glass-table {
  @include table-glass;
}

// ==================== 特定场景样式 ====================
// 工具栏样式
.toolbar-glass {
  .el-select {
    @include select-glass;
  }

  .el-input {
    .el-input__wrapper {
      @include input-glass;
    }
  }

  .el-button {
    @include button-glass;
  }
}

// 表单样式
.form-glass {
  .el-form-item {
    .el-select {
      @include select-glass;
    }

    .el-input {
      .el-input__wrapper {
        @include input-glass;
      }
    }

    .el-textarea {
      .el-textarea__inner {
        @include input-glass;
        resize: vertical;
      }
    }
  }
}

// 弹窗内表单样式
.dialog-form-glass {
  .el-form-item {
    .el-select {
      @include select-glass;
    }

    .el-input {
      .el-input__wrapper {
        @include input-glass;
      }
    }

    .el-textarea {
      .el-textarea__inner {
        @include input-glass;
        resize: vertical;
      }
    }
  }
}

// ==================== 下拉菜单全局样式 ====================
// 所有选择框下拉菜单
:deep(.el-select-dropdown) {
  @include dropdown-glass;
}

// 所有下拉菜单
:deep(.el-dropdown-menu) {
  @include dropdown-glass;
}

// 级联选择器下拉菜单
:deep(.el-cascader__dropdown) {
  @include dropdown-glass;
}

// 日期选择器下拉菜单
:deep(.el-date-picker) {
  @include dropdown-glass;
}

// 时间选择器下拉菜单
:deep(.el-time-panel) {
  @include dropdown-glass;
}

// ==================== 响应式样式 ====================
@media (max-width: $breakpoint-md) {

  .glass-select,
  .el-select.glass-select {
    .el-input__wrapper {
      font-size: $font-size-small;
    }
  }

  :deep(.glass-dropdown),
  :deep(.el-select-dropdown.glass-dropdown) {
    .el-select-dropdown__item {
      font-size: $font-size-small;
      padding: 6px 10px;
    }
  }
}

// ==================== 动画效果 ====================
// 下拉菜单出现动画
:deep(.el-select-dropdown) {
  animation: dropdown-fade-in 0.3s ease-out;
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

// 选择框聚焦动画
.glass-select,
.el-select.glass-select {
  .el-input__wrapper {
    &.is-focus {
      animation: select-focus-glow 0.3s ease-out;
    }
  }
}

@keyframes select-focus-glow {
  0% {
    box-shadow: $shadow-inset;
  }

  50% {
    box-shadow: $shadow-inset, 0 0 15px rgba(0, 234, 255, 0.4);
  }

  100% {
    box-shadow: $shadow-inset, $shadow-glow;
  }
}

// ==================== 全局强制覆盖样式 ====================
// 强制覆盖所有选择框样式为透明玻璃效果
:deep(.el-select) {
  @include select-glass;
}

// 强制覆盖所有输入框样式
:deep(.el-input) {
  .el-input__wrapper {
    @include input-glass;
  }
}

// 强制覆盖所有文本域样式
:deep(.el-textarea) {
  .el-textarea__inner {
    @include input-glass;
    resize: vertical;
  }
}

// ==================== 工具类 ====================
// 快速应用透明玻璃效果的工具类
.apply-glass-theme {
  .el-select {
    @include select-glass;
  }

  .el-input {
    .el-input__wrapper {
      @include input-glass;
    }
  }

  .el-button {
    @include button-glass;
  }

  .el-dialog {
    @include dialog-glass;
  }

  .el-table {
    @include table-glass;
  }
}

// 清除Element Plus默认样式的工具类
.reset-element-styles {

  .el-select .el-input__wrapper,
  .el-input .el-input__wrapper {
    @include reset-element-plus;
  }

  .el-select-dropdown,
  .el-dropdown-menu {
    @include reset-element-plus;
  }
}